<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta content="" name="description" />
    <meta content="webthemez" name="author" />
    <title>Bootstrap Admin Theme</title>
	<!-- Bootstrap Styles-->
    <link href="../../assets/css/bootstrap.css" rel="stylesheet" />
     <!-- FontAwesome Styles-->
    <link href="../../assets/css/font-awesome.css" rel="stylesheet" />
	
    <link href="../../assets/css/select2.min.css" rel="stylesheet" >
	<link href="../../assets/css/checkbox3.min.css" rel="stylesheet" >
        <!-- Custom Styles-->
   <!-- <link href="assets/css/custom-styles.css" rel="stylesheet" />-->
     <!-- Google Fonts-->
   <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <script src="../../js/layui/layui.js"></script>
	<link rel="stylesheet" href="../../css/img.css">
</head>
<body>
   
        
        <!--/. NAV TOP  -->
		    <div id="page-wrapper" >
				 <div class="header"> 
				 <br /><br /><br />

                     <div style="margin-left:0%;">
			    	<div class="panel-body">
		        <form class="form-inline">
		            <div class="form-group" style="...">
		                <label for="exampleInputName2">选择接收人角色:</label>
		                <select class="selectbox">
			                <option value="AK">Alaska</option>
			                <option value="HI">Hawaii</option>
			                <option value="IL">Illinois</option>
			                <option value="IA">Iowa</option>
			                <option value="KS">Kansas</option>
			                <option value="KY">Kentucky</option>
			        </select>
		            </div>
		           <div class="form-group" style="margin-left: 1%;">
		                <label for="exampleInputName2">选择接收人:</label>
		                <select class="selectbox">
			                <option value="AK">Alaska</option>
			                <option value="HI">Hawaii</option>
			                <option value="IL">Illinois</option>
			                <option value="IA">Iowa</option>
			                <option value="KS">Kansas</option>
			                <option value="KY">Kentucky</option>
			        </select>
		            </div>
		        <a href="#" class="btn btn-success">申请</a>
		        <a href="submitApply.html" class="btn btn-info">返回</a>
		        <a href="#" class="btn btn-warning example">查看示例</a>
		        </form>
		    </div>
    </div>
	         <h1 class="page-header" style="text-align: center">
            物业管理 <small>（员工个人）</small>
        </h1>
	        
		</div>
		
		
           <!-- <div id="page-inner"> -->
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="card-title">
                                        <div class="title">基本信息</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="card-title">
                                        <div class="title">
                                        	<div class="panel panel-default">
                        <!--<div class="panel-heading">
                            Basic Table
                        </div>-->
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table">
                                  
                                           <tr>
                                                <td style="text-align: right;">
                                                    报账人：
                                                </td>
                                                <td>
                                                    张三
                                                </td>

                                                <td style="text-align: right;">
                                                    报账单位名称：
                                                </td>
                                                <td>
                                                    软通动力
                                                </td>
                                                <td style="text-align: right;">报账人电话：</td>
                                                <td>
                                                    1234567890
                                                </td>
                                            </tr>
                                            <tr>
											    <td style="text-align: right;">
                                                    公司代码：
                                                </td>
                                                <td>
                                                    9876543210
                                                </td> 
                                                <td style="text-align: right;">
                                                    报账时间：
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" class="exampleInputName2" placeholder="Jane Doe">
                                                </td>
                                                <td style="text-align: right;">费用发生日：</td>
                                                <td>
                                                    <input type="text" class="form-control" class="exampleInputName2" placeholder="Jane Doe">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="text-align: right;">
                                                    报账单号：
                                                </td>
                                                <td>
                                                    <input type="search" class="form-control input-sm" aria-controls="dataTables-example" placeholder="">
                                                </td>
												<td style="text-align: right;">
                                                    预算指标：
                                                </td>
                                                <td>
                                                    <div class="form-group" style="margin-left: 3%;">
														<select class="selectbox">
															<option value="AK">国内差旅</option>
															<option value="HI">员工福利</option>
															<option value="IL">公务交通</option>
															<option value="IA">物业管理</option>
														</select>
													</div>
                                                </td>
                                                <td style="text-align: right;">发票类型：</td>
                                                <td>
                                                    <div class="form-group" style="margin-left: 3%;">
													<select class="selectbox">
														<option value="AK">Alaska</option>
														<option value="HI">Hawaii</option>
														<option value="IL">Illinois</option>
														<option value="IA">Iowa</option>
														<option value="KS">Kansas</option>
														<option value="KY">Kentucky</option>
													</select>
													</div>
                                                </td>
                                            </tr>
                                            <tr >
											    <td style="text-align: right;">
                                                    收支方式：
                                                </td>
                                                <td>
                                                    <input type="search" class="form-control input-sm" aria-controls="dataTables-example">
                                                </td> 
                                                <td style="text-align: right;">
                                                    是否员工代垫：
                                                </td>
                                                <td>
                                                    <input type="search" class="form-control input-sm" aria-controls="dataTables-example" placeholder="">
                                                </td>
                                                <td style="text-align: right;">
                                                    是否个人专项：
                                                </td>
                                                <td>
                                                    <input type="search" class="form-control input-sm" aria-controls="dataTables-example" placeholder="">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="text-align: right;">
                                                    附单据张数：
                                                </td>
                                                <td>
                                                    <input type="search" class="form-control input-sm" aria-controls="dataTables-example" placeholder="">
                                                </td>
                                                <td style="text-align: right;">
                                                    报账说明：
                                                </td>
                                                <td colspan="3">
                                                    <input type="search" class="form-control input-sm" aria-controls="dataTables-example" placeholder="">
                                                </td>
                                            </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                                        	
                                        </div>
                                    </div>
                                </div>
                                <div class="panel-body">
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="card-title">
                                        <div class="title">明细信息</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                     <div class="row">
                        <div class="col-xs-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="card-title">
                                        <div class="title">
                                        	<div class="panel panel-default">
						                        <!--<div class="panel-heading">
						                            Kitchen Sink
						                        </div>-->
						                        <div class="panel-body">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-bordered table-hover">
                                            <thead>
                                            <tr>
                                                <th>是否使用成本/资本预算</th>
                                                <th>预算责任中心</th>
												<th>记账成本中心</th>
                                                <th>报款金额（含税）</th>
                                                <th>报款金额</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>
                                                    <input type="text" class="form-control" id="exampleInputName2" placeholder="是否使用成本/资本预算">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" id="exampleInputName2" placeholder="预算责任中心">
                                                </td>
												<td>
                                                    <input type="text" class="form-control" id="exampleInputName2" placeholder="记账成本中心">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" id="exampleInputName2" placeholder="报款金额（含税）">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" id="exampleInputName2" placeholder="报款金额">
                                                </td>
                                            </tr>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
						                    </div>
						                                        	
                                        </div>
                                    </div>
                                </div>
                                <div class="panel-body">
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="card-title">
                                        <div class="title">其他</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="card-title">
                                        <div class="title">
                                        	<!--选项卡-->
                                        	<div class="panel panel-default">
                        <div class="panel-body">
                            <ul class="nav nav-tabs">
                                <li class=""><a href="#home" data-toggle="tab" aria-expanded="false">内部人信息</a>
                                </li>
                                <li class="active"><a href="#profile" data-toggle="tab" aria-expanded="true">报账单影像</a>
                                
                            </ul>

                            <div class="tab-content">
                                <div class="tab-pane fade" id="home">
                                    
                                   
                                        	 <!--表格-->
                                        	<div class="panel panel-default">
						                     <!--   <div class="panel-heading">
						                            Bordered Table
						                        </div>-->
						                       
						                        <!-- /.panel-heading -->
						                        <div class="panel-body">
						                            <div class="table-responsive table-bordered">
						                                <table class="table">
						                                    <thead>
						                                        <tr>
						                                            <th>序号</th>
						                                            <th>收款人</th>
						                                            <th>所属部门</th>
						                                            <th>员工编号</th>
						                                            <th>收款类型</th>
						                                            <th>公司名称</th>
						                                            <th>开户行</th>
						                                            <th>银行账号</th>
						                                            <th>金额</th>
						                                        </tr>
						                                    </thead>
						                                    <tbody>
						                                        <tr>
																	 <td>1</td>
						                                            <td>
						                                            	 <input type="text" class="form-control" id="exampleInputName2" placeholder="收款人姓名">
						                                            	 
						                                            </td>
						                                            
						                                             <td>
						                                            	 <input type="text" class="form-control" id="exampleInputName2" placeholder="所属部门">
						                                            	 
						                                            </td>
						                                             <td>
						                                            	 <input type="text" class="form-control" id="exampleInputName2" placeholder="员工编号">
						                                            	 
						                                            </td>
						                                             <td>
						                                            	 <input type="text" class="form-control" id="exampleInputName2" placeholder="收款类型">
						                                            	 
						                                            </td>
						                                             <td>
						                                            	 <input type="text" class="form-control" id="exampleInputName2" placeholder="公司名称">
						                                            	 
						                                            </td>
						                                             <td>
						                                            	 <input type="text" class="form-control" id="exampleInputName2" placeholder="开户行">
						                                            	 
						                                            </td>
						                                             <td>
						                                            	 <input type="text" class="form-control" id="exampleInputName2" placeholder="银行账号">
						                                            	 
						                                            </td>
						                                             <td>
						                                            	 <input type="text" class="form-control" id="exampleInputName2" placeholder="金额">
						                                            	 
						                                            </td>
						                                            
						                                        </tr>
						                                      
						                                    </tbody>
						                                </table>
						                            </div>
						                        </div>
						                    </div>
                                        	<!--
                                            	作者：1049794100@qq.com
                                            	时间：2018-01-04
                                            	描述：表格
                                            --> 
                                </div>
                                <div class="tab-pane fade active in" id="profile">
                                	   <div class="layui-upload">
                                                <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
                                                <div class="layui-upload-list">
                                                    <table class="layui-table">
                                                        <thead>
                                                        <th>文件名</th>
                                                        <th>大小</th>
                                                        <th>状态</th>
                                                        <th>操作</th>
                                                        </thead>
                                                        <tbody id="demoList"></tbody>
                                                    </table>
                                                </div>
												 <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
														预览图：
														<div class="layui-upload-list" id="demo2"></div>
													</blockquote>
                                                <button type="button" class="layui-btn" id="testListAction">开始上传</button>
                                            </div>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                    </div>
               
			</div>
             <!-- /. PAGE INNER  -->
            </div>
         <!-- /. PAGE WRAPPER  -->
       
    <!-- JS Scripts-->
    <!-- jQuery Js -->
    <script src="../../assets/js/jquery-1.10.2.js"></script>
      <!-- Bootstrap Js -->
    <script src="../../assets/js/bootstrap.min.js"></script>
    <!-- Metis Menu Js -->
    <script src="../../assets/js/jquery.metisMenu.js"></script>
	<script src="../../assets/js/select2.full.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
	  $(".selectbox").select2();
	});

    //查看示例
    layui.use('layer', function(){
        var layer = layui.layer;
    });
    $('.example').on('click', function(){
        layer.open({
            type: 2,
            title: '物业管理示例',
            maxmin: true,
            shadeClose: false, //点击遮罩关闭层
            area : ['80%' , '80%'],
            content: ['../../datamanager/personwork/propertyManager.html','yes']
        });
    });

	 layui.use('upload', function(){
        var $ = layui.jquery
                ,upload = layui.upload;
        //多文件列表示例
        var demoListView = $('#demoList')
                ,uploadListIns = upload.render({
                    elem: '#testList'
                    ,url: '/upload/'
                    ,accept: 'file'
                    ,multiple: true
                    ,auto: false
                    ,bindAction: '#testListAction'
                    ,choose: function(obj){
                        var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                        //读取本地文件
                        obj.preview(function(index, file, result){
                            var tr = $(['<tr id="upload-'+ index +'">'
                                ,'<td>'+ file.name +'</td>'
                                ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                                ,'<td>等待上传</td>'
                                ,'<td>'
                                ,'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
                                ,'<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
                                ,'</td>'
                                ,'</tr>'].join(''));

                           //图片预览
                            $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="yulanimg" id="img-'+ index +'">')

                            //单个重传
                            tr.find('.demo-reload').on('click', function(){
                                obj.upload(index, file);
                            });

                            //删除
                            tr.find('.demo-delete').on('click', function(){
                                delete files[index]; //删除对应的文件
                                tr.remove();
                                console.log(index);
                                var str ='#img-'+index;
                                console.log(str);
                                $(str).remove()
                                uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                            });

                            demoListView.append(tr);
                        });
                    }
                    ,done: function(res, index, upload){
                        if(res.code == 0){ //上传成功
                            var tr = demoListView.find('tr#upload-'+ index)
                                    ,tds = tr.children();
                            tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                            tds.eq(3).html(''); //清空操作
                            return delete this.files[index]; //删除文件队列已经上传成功的文件
                        }
                        this.error(index, upload);
                    }
                    ,error: function(index, upload){
                        var tr = demoListView.find('tr#upload-'+ index)
                                ,tds = tr.children();
                        tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                        tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                    }
                });

    });
	</script>
      <!-- Custom Js -->
    <script src="../../assets/js/custom-scripts.js"></script> 
	
		
   
</body>
</html>
